<template>
    <div class="common-container">
        <!-- <div class="header">
      <div class="header_left">
      </div>
      <div class="header_right">
        <el-button size="medium" style="margin-left: 15px;" @click="onAdd">新增</el-button>
      </div>
    </div> -->
        <div class="content">
            <el-table :data="tableData" height="calc(100% - 0px)" class="table" :header-cell-style="headerStyle"
                row-key="regionCode" lazy :load="load"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="refreshTable"
                :default-expand-all="false">

                <!-- <el-table-column align="center" label="序号" type="index" width="80">
                </el-table-column> -->

                <el-table-column align="left" prop="regionName" label="行政区域名称" min-width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.regionName }}</span>
                        <i class="el-icon-circle-plus-outline" v-if="scope.row.regionLevel != 5"
                            @click="onAdd(scope.row)"></i>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="regionCode" label="行政区域码" min-width="140">
                </el-table-column>

                <el-table-column align="center" prop="ruralCode" label="城乡分类代码" min-width="120">
                </el-table-column>

                <el-table-column align="center" prop="management" label="操作" min-width="60" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                            <i @click="onEdit(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                            <i @click="onDel(scope.row)" class="iconfont shanchu tableBtnIcon"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <addRegion ref="refAddRegion" :fixedPjtInfo='fixedPjtInfo'></addRegion>
        <editRegion ref="refEditRegion" :editInfo="editInfo"></editRegion>

    </div>
</template>

<script>
import addRegion from "./components/addRegion.vue";
import editRegion from "./components/editRegion.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import {
    reqAnalysisRegionDel,
    reqRegion,
    reqRegionLevel,
} from "@/api/api";
import {
    handleTree
} from "@utils/trans-tree";

export default {
    name: "",
    components: {
        addRegion,
        editRegion,
        Pagination,
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            loadingSearch: false, //查询按钮loading
            configKey: "",
            tableData: [],
            editInfo: {},
            fixedPjtInfo: {},
        };
    },
    mounted() { },
    computed: {},
    methods: {
        // 懒加载子节点数据
        load(tree, treeNode, resolve) {
            reqRegionLevel(tree.regionCode).then((res) => {
                res.data.rows.forEach((item) => {
                    // 等于5没下级了
                    if (item.regionLevel != 5) {
                        item.hasChildren = true;
                    }
                });
                resolve(res.data.rows);
            });
        },
        // 固定父id新增
        onAdd(row) {
            this.fixedPjtInfo = JSON.parse(JSON.stringify(row));
            this.$refs.refAddRegion.dialogVisible = true;
        },
        // 清空
        clearNickname() {
            this.page = 1;
            this.limit = 10;
            this.Region();
        },
        //查询
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.Region();
            this.loadingSearch = false;
        },
        onEdit(item) {
            this.editInfo = JSON.parse(JSON.stringify(item)); //深拷贝
            this.$refs.refEditRegion.dialogVisible = true;
        },
        onDel(row) {
            this.$confirm("此操作将永久删除该行政单位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await reqAnalysisRegionDel(row.regionCode);
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("删除行政单位成功");
                    this.Region();
                    this.loadChildren2(row.parentCode);
                })
                .catch(() => { });
        },

        // 重新渲染表格
        loadChildren2(parentCode) {
            reqRegionLevel(parentCode).then((res) => {
                this.$set(
                    this.$refs.refreshTable.store.states.lazyTreeNodeMap,
                    parentCode,
                    res.data.rows
                );
            });
        },

        // 获取列表
        async Region() {
            let res = await reqRegion();
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            let {
                rows
            } = res.data;
            this.tableData = handleTree(
                rows,
                "regionCode",
                "regionLevel",
                "ruralCode"
            );
            this.tableData.forEach((item, index) => {
                if (item.regionLevel == 1) {
                    item.hasChildren = true;
                }
            });
        },
    },
    created() {
        this.Region();
    },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.common-container .content {
    height: 100%;
}

// +号
.el-icon-circle-plus-outline {
    // float: right;
    margin-left: 20px;
    font-size: 18px;
    color: @primaryThemeTxtColor;
    cursor: pointer;
    margin-bottom: 3px;
    &:hover {
        opacity: 0.6;
    }
}

// 折叠箭头
::v-deep .el-icon-arrow-right:before {
    content: "\e791";
    // position: relative;
    font-size: 18px;
    // top: 4px;
    color: @primaryThemeTxtColor;
}
::v-deep .el-table tr td:first-of-type .cell{
  display: flex;
  align-items: center;
}
</style>